<template>
    <div class="div">
        <p class="top"><span>入口页面</span><span>小说阅读页</span></p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="138px" class="demo-ruleForm form" label-position="left">
            <el-form-item label="派单渠道名称：" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="派单渠道类型：" prop="oa_type" class="oa_type">
                <el-radio-group v-model="ruleForm.oa_type">
                    <el-radio :label="0">认证公众号</el-radio>
                    <el-radio :label="1">非认证公众号</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="novelfm"><img src="../../../public/img/novelfm.jpg" alt=""></div>
            <p class="chapter"><span>阅读原文章节：</span><span>{{chapter_name}}</span></p>
            <el-form-item label="关注章节序号：" prop="sub_chapter_num">
                <el-input v-model="ruleForm.sub_chapter_num" class="pop4" placeholder="可填，如不填则选用小说默认设置"></el-input>
            </el-form-item>
            <el-form-item label="设为置顶章节序号：" prop="top_chapter_num">
                <el-input v-model="ruleForm.top_chapter_num" class="pop5" placeholder="可填，如不填则选用小说默认设置"></el-input>
            </el-form-item>
            <div @click="submitForm('ruleForm')" class="btn">生成链接</div>
        </el-form>
    </div>
</template>

<script>
export default {
  props: ["attention", "top", "read", "chapter", "img"],
  data() {
    return {
      ruleForm: {
        name: "",
        oa_type: "",
        sub_chapter_num: "",
        top_chapter_num: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入派单渠道名称", trigger: "blur" },
          { min: 0, max: 64, message: "字数不能超过32个字", trigger: "blur" }
        ],
        oa_type: [
          { required: true, message: "请选择派单渠道类型", trigger: "change" }
        ],
        sub_chapter_num: [
          {
            type: "string",
            pattern: /^[0-9]+$/,
            message: "请输入数字",
            trigger: "change"
          }
        ],
        top_chapter_num: [
          {
            type: "string",
            pattern: /^[0-9]+$/,
            message: "请输入数字",
            trigger: "change"
          }
        ]
      },
      chapter_name: this.chapter
    };
  },
  methods: {
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let sub_chapter_num = 0;
          let top_chapter_num = 0;
          if (!that.ruleForm.sub_chapter_num) {
            sub_chapter_num = this.attention;
          } else {
            sub_chapter_num = that.ruleForm.sub_chapter_num;
          }
          if (!that.ruleForm.top_chapter_num) {
            top_chapter_num = this.top;
          } else {
            top_chapter_num = that.ruleForm.top_chapter_num;
          }
          that.axios
            .post("/cp/v1/book/getExtension", {
              name: that.ruleForm.name,
              oa_type: that.ruleForm.oa_type,
              n_id: that.$route.params.book_id,
              chapter_num: that.read,
              oa_type: that.ruleForm.oa_type,
              d_id: JSON.parse(localStorage.userInfo).user_id,
              promote_type: 0,
              top_chapter_num: top_chapter_num,
              sub_chapter_num: sub_chapter_num
            })
            .then(res => {
                console.log(res)
              if (res.data.code == 200) {
                that.$emit("dialog",res.data.data);
              }
            })
            .catch(function(error) {
              error = error + "";
              if (error.search("timeout") !== -1) {
                //超时判断
                that.loading_read = true;
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {},
  watch: {
    chapter(value, oldvalue) {
      this.chapter_name = value;
    }
  }
};
</script>

<style scoped>
.div {
  font-family: Microsoft YaHei;
}
.form {
  padding: 0 20px;
}
.top {
  text-align: center;
  color: #666;
  margin-bottom: 35px;
}
.top span:first-child {
  margin-right: 52px;
}
.novelfm {
  width: 100%;
  text-align: center;
  margin-bottom: 23px;
}
.novelfm img {
  width: 80px;
  height: 107px;
}
.resource {
  margin-bottom: 31px;
}
.chapter {
  margin-bottom: 26px;
}
.chapter span {
  margin-right: 54px;
}
.chapter span:last-child {
  margin-right: 54px;
  font-weight: bold;
}
.btn {
  margin: 0 auto;
  width: 104px;
  height: 33px;
  background-color: #36a4ff;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  line-height: 33px;
  font-family: Microsoft YaHei;
}
.btn:hover {
  /* background-color: #1e81d3; */
  cursor: pointer;
}
.btn:active {
  background-color: #0061b1;
}
</style>


